<template>
    <div class="recordDetail">
        <navBar titleName="病历详情" style="width: 100%"></navBar>
        <div class="info">
            <nut-row class="user">
                <nut-col :span="6">
                    <div class="flex-content" style="text-align: left;color: #78A4F5;font-size: 1.5em;">
                        {{this.$route.params.patient.patientName}}
                    </div>
                </nut-col>
                <nut-col :span="16">
                    <div class="flex-content flex-content-light"
                         style="text-align: left;color: #666666;padding-right: 20px">
                        <span class="info_title_right">{{this.$route.params.patient.patientGender| gender}}</span>
                        <span class="info_title_left">{{this.$route.params.patient.birth| birth}}</span>
                    </div>
                </nut-col>
            </nut-row>
            <nut-row style="padding-bottom: 10px;padding-top: 5px;">
                <nut-col :span="8" style="line-height: 30px !important;">
                    <div class="flex-content" style="text-align: left;">医生姓名</div>
                </nut-col>
                <nut-col :span="16" style="line-height: 30px !important;">
                    <div class="flex-content" style="text-align: left;">{{dname}}</div>
                </nut-col>
                <nut-col :span="8" style="line-height: 31px !important;">
                    <div class="flex-content" style="text-align: left;">接诊时间</div>
                </nut-col>
                <nut-col :span="16" style="line-height: 31px !important;">
                    <div class="flex-content" style="text-align: left;">{{item.record.createTime | formatDate}}</div>
                </nut-col>
                <nut-col :span="8" style="line-height: 32px !important;">
                    <div class="flex-content" style="text-align: left;">主诊断</div>
                </nut-col>
                <nut-col :span="16" style="line-height: 32px !important;">
                    <div class="flex-content" style="text-align: left;">{{item.diagnosis.diagMain}}</div>
                </nut-col>
            </nut-row>
        </div>

        <div style="width: 100%;margin-top: 10px;">
            <div class="myTittle">
                <p style="margin-bottom: 0;padding-left: 20px">病历详情</p>
            </div>

            <div class="form-group">
                <formCell v-model="item.record.height" title="身高" placeholder="" tag="number" suffix="cm"
                          :readonly="readonly"/>
            </div>

            <div class="form-group">
                <formCell v-model="item.record.weight" title="体重" placeholder="" tag="number" suffix="kg"
                          :readonly="readonly"/>
            </div>
            <div class="form-group">
                <formCell v-model="item.record.temperature" title="体温" placeholder="请选择" tag="number" suffix="℃"
                          :readonly="readonly"/>
            </div>
            <div class="form-group">
                <formCell v-model="item.record.breath" title="呼吸" placeholder="" tag="number" :readonly="readonly"
                          suffix="次/min"/>
            </div>
            <div class="form-group">
                <formCell v-model="item.record.max_bp" title="高血压" placeholder="" tag="number" :readonly="readonly"
                          suffix="mmHg"/>
            </div>
            <div class="form-group">
                <formCell v-model="item.record.min_bp" title="低血压" placeholder="" tag="number" :readonly="readonly"
                          suffix="mmHg"/>
            </div>
            <div class="form-group">
                <formCell v-model="item.record.pulse" title="脉搏" placeholder="" tag="number" :readonly="readonly"
                          suffix="次/min"/>
            </div>
            <div class="cutline"></div>
            <div class="form-group">
                <formCell title="既往史" align="top" style="border-bottom:0"></formCell>
            </div>
            <div class="form-group">
                <textarea v-model="item.record.his_record" class="item-textarea" readonly></textarea>
            </div>
            <div class="cutline"></div>
            <div class="form-group">
                <formCell title="过敏史" align="top" style="border-bottom:0;border-top: 1px solid #e8e8e8;"></formCell>
            </div>
            <div class="form-group">
                <textarea v-model="item.record.allergry" class="item-textarea" readonly></textarea>
            </div>

            <div class="form-group">
                <formCell title="体格检查" align="top" style="border-bottom:0;border-top: 1px solid #e8e8e8;"></formCell>
            </div>
            <div class="form-group">
                <textarea v-model="item.diagnosis.physicalCheck" class="item-textarea" readonly></textarea>
            </div>
            <div class="form-group">
                <formCell title="病人描述" align="top" style="border-bottom:0;border-top: 1px solid #e8e8e8;"></formCell>
            </div>
            <div class="form-group">
                <textarea v-model="item.diagnosis.chiefComplaint" class="item-textarea" readonly></textarea>
            </div>
        </div>

        <div style="width: 100%;margin-top: 20px;">
            <div class="form-group">
                <formCell v-model="item.diagnosis.diagMain" title="主诊断" placeholder="" tag="input"
                          :readonly="readonly"/>
            </div>
            <div class="form-group">
                <formCell v-model="item.diagnosis.diagSecond" title="次诊断" placeholder="" tag="input"
                          :readonly="readonly"/>
            </div>
        </div>

        <div style="width: 100%;margin-top: 20px;">
            <div class="form-group">
                <formCell title="处置建议" align="top" style="border-bottom:0;border-top: 1px solid #e8e8e8;"></formCell>
            </div>
            <div class="form-group">
                <textarea v-model="item.diagnosis.comments" class="item-textarea" readonly></textarea>
            </div>

            <div class="form-group">
                <formCell title="用药建议" align="top" style="border-bottom:0;border-top: 1px solid #e8e8e8;"></formCell>
            </div>
            <div class="form-group">
                <textarea v-model="item.diagnosis.drug" class="item-textarea" readonly></textarea>
            </div>

            <div class="form-group">
                <formCell title="打针建议" align="top" style="border-bottom:0;border-top: 1px solid #e8e8e8;"></formCell>
            </div>
            <div class="form-group">
                <textarea v-model="item.diagnosis.injection" class="item-textarea" readonly></textarea>
            </div>
        </div>

        <div style="width: 100%;margin-top: 20px;">
            <div class="form-group">
                <formCell title="随访记录" align="top" style="border-bottom:0;border-top: 1px solid #e8e8e8;"></formCell>
            </div>
            <div class="form-group">
                <textarea v-model="item.diagnosis.recommendations" class="item-textarea" readonly></textarea>
            </div>
        </div>

        <div style="width: 100%;margin-top: 10px;background-color: #fff;">
            <div class="myTittle">
                <p style="margin-bottom: 0;font-size: 16px;padding-left: 20px">处方单</p>
            </div>

            <!--<nut-row style="padding-bottom: 10px;">
                <nut-col :span="10" style="line-height: 30px !important;padding-top: 5px;">
                    <div class="flex-content" style="text-align: left;color: #BCBCBC;font-size: 16px">药品名称</div>
                </nut-col>
                <nut-col :span="4" style="line-height: 30px !important;padding-top: 5px;">
                    <div class="flex-content" style="color: #BCBCBC;font-size: 16px">价格</div>
                </nut-col>
                <nut-col :span="6" style="line-height: 30px !important;padding-top: 5px;">
                    <div class="flex-content" style="color: #BCBCBC;font-size: 16px">规格</div>
                </nut-col>
                <nut-col :span="4" style="line-height: 30px !important;padding-top: 5px;">
                    <div class="flex-content" style="text-align:left;color: #BCBCBC;font-size: 16px">数量</div>
                </nut-col>
            </nut-row>-->

            <!--<nut-row v-for="(item, index) in products" :key="index">
                <nut-col :span="10" style="line-height: 30px !important;padding-top: 5px;">
                    <div class="flex-content" style="text-align: left;color: #BCBCBC;font-size: 16px">
                        {{item.productName}}
                        <img v-bind:src="item.productImageurl" style="max-width: 58%;"/>
                    </div>
                </nut-col>
                <nut-col :span="4" style="line-height: 30px !important;padding-top: 5px;">
                    <div class="flex-content" style="color: #BCBCBC;font-size: 16px">
                        ￥{{ new Number((item.productPrice * item.num) / 100).toFixed(2) }}
                    </div>
                </nut-col>
                <nut-col :span="6" style="line-height: 30px !important;padding-top: 5px;">
                    <div class="flex-content" style="color: #BCBCBC;font-size: 16px">
                        {{item.packingProduct}}
                    </div>
                </nut-col>
                <nut-col :span="4" style="line-height: 30px !important;padding-top: 5px;">
                    <div class="flex-content" style="text-align:left;color: #BCBCBC;font-size: 16px">{{item.num}}</div>
                </nut-col>

            </nut-row>-->

            <ul class="ul-list">
                <li class="li-item" v-for="(item, index) in products" :key="index">
                    <div class="thumb">
                        <img :src="item.productImageurl" alt="">
                    </div>
                    <div class="md-cell" style="text-align: right;">
                        <p class="title">{{item.productName}}</p>
                        <p class="desc">{{item.packingProduct}}</p>
                        <p class="price" style="display: none">￥{{ new Number(item.productPrice / 100).toFixed(2)
                            }}元</p>
                        <p class="cell-3" style="float: right;">
                            <span>数量：{{item.num}}</span>
                        </p>
                    </div>

                    <div class="md-cell">
                        <p class="title">给药途径：
                            <span>{{item.administration}}</span>
                        </p>
                        <p class="title">给药频率：
                            <span>{{item.frequency}}</span>
                        </p>
                        <p class="title">单次剂量：
                            <span>{{item.dose}}</span>
                        </p>
                        <p class="title">给药次数：
                            <span>{{item.times}}</span>
                        </p>
                    </div>
                </li>
            </ul>

        </div>

    </div>
</template>

<script>
    /* eslint-disable no-console */

    import navBar from '@/components/common/navBar.vue'
    import formCell from "@/components/common/formCell.vue";

    /* eslint-disable no-undef */
    export default {
        name: "recordDetail",
        components: {
            navBar,
            formCell
        },
        filters: {
            formatDate: function (time) {
                if (time != null && time != "") {
                    let date = new Date(time);
                    return formatDate(date, "yyyy-MM-dd hh:mm:ss");
                } else {
                    return "";
                }
            },
            gender: function (item) {
                return (item === 1) ? "男" : "女";
            },
            birth: function (strBirthday) {
                if (strBirthday) {
                    let strBirthdayArr = strBirthday.split("-");
                    let d = new Date();
                    let yearDiff = d.getFullYear() - strBirthdayArr[0];
                    let monthDiff = d.getMonth() + 1 - strBirthdayArr[1];
                    let dayDiff = d.getDate() - strBirthdayArr[2];
                    let age = monthDiff < 0 || (monthDiff === 0 && dayDiff < 0) ? yearDiff - 1 : yearDiff;
                    //判断有没有到生日,没到就减1
                    return age <= 0 ? monthDiff + "月" : age + "岁";
                }
            }
        },
        data() {
            return {
                dname: "",
                recordId: "",
                readonly: true,
                products: [],
                item: {
                    "record": {
                        "recordId": 30,
                        "adviceId": 64,
                        "doctorId": 1,
                        "height": "100",
                        "weight": "56.00",
                        "temperature": "36.0",
                        "maxBp": "120.0",
                        "minBp": "68.0",
                        "pulse": "60",
                        "breath": "49",
                        "allergry": "",
                        "hisRecord": "",
                        "remark": "",
                        "createBy": 1,
                        "createTime": 1564036687000,
                        "versions": 1,
                        "isDelete": 0
                    },
                    "diagnosis": {
                        "diagnosisId": 31,
                        "recordId": 30,
                        "doctorId": 1,
                        "diagMain": "高血压",
                        "diagSecond": "病毒性感冒",
                        "chiefComplaint": "",
                        "physicalCheck": "",
                        "hpi": "",
                        "comments": "",
                        "drug": "",
                        "injection": "",
                        "status": 0,
                        "createBy": 1,
                        "createTime": 1564037243000,
                        "versions": 0,
                        "isDelete": 0
                    },
                    "products": "[{\"recipeId\":\"43\",\"recipeType\":\"1\",\"skus\":[{\"num\":1,\"packingProduct\":\"60s/瓶。\",\"productCode\":\"119\",\"productImageurl\":\"http://image.jianke.com/upload/prodimage/sl201708/201781616178904.jpg\",\"productName\":\"复方甲氧那明胶囊(阿斯美)\",\"productPrice\":5571,\"skuId\":\"111\"}]}]"
                }
            }
        },
        created() {
            this.dname = this.$route.params.item.dname;
            this.recordId = this.$route.params.item.recordId;
            /*let dataList = JSON.parse(this.item.products);
            for (let k in dataList) {
                let item = dataList[k].skus;
                if (item) {
                    // this.products.push.apply(this.products,dataList[k].skus);
                    for (let p in item) {
                        if (item[p].num > 0) {
                            this.products.push(item[p]);
                        }
                    }
                }
            }*/
            this.getRecordInfo(this.recordId);
        },
        methods: {
            getRecordInfo(id) {
                this.API.get("/rec/getRecord/" + id, {
                    params: {
                        recordId: id
                    }
                })
                    .then(({data}) => {
                        if (data.code === 1200) {
                            this.products = [];
                            console.log(data.data);
                            this.item = data.data;
                            let dataList = JSON.parse(data.data.products);
                            for (let k in dataList) {
                                let item = dataList[k].skus;
                                if (item) {
                                    // this.products.push.apply(this.products,dataList[k].skus);
                                    for (let p in item) {
                                        if (item[p].num > 0) {
                                            this.products.push(item[p]);
                                        }
                                    }
                                }
                            }
                            console.log(this.products);
                        }

                    })
            }
        }
    }
</script>

<style scoped>
    .recordDetail {
        background-color: #F3F3F3;
    }

    .recordDetail .info {
        margin-top: 50px;
        background-color: #fff;
        border-bottom: 1px solid #e6e6e6;
        min-height: 90px;
        padding-left: 20px;
    }

    .info .user {
        min-height: 45px !important;
        line-height: 45px !important;
        margin-bottom: 5px;
        margin-right: 20px;
        border-bottom: solid 1px #eee;
    }

    .info_title_right {
        font-size: 0.9em;
        color: #DBD7D6;
        border-right: 1px solid #DBD7D6;
        padding-right: 16px;
    }

    .info_title_left {
        font-size: 0.9em;
        color: #DBD7D6;
        padding-left: 10px;
    }

    .myTittle {
        text-align: left;
        background-color: #77A4F5;
        line-height: 40px;
        margin-left: -19px;
        padding-left: 20px;
    }

    .ul-list {
        margin: 0;
        padding: 0 12px;
        background-color: #fff;
    }

    .ul-list h3 {
        text-align: left;
    }

    .ul-list .li-item {
        background-color: #fff;
        font-size: 0.9em;
        display: flex;
        /*display: -webkit-box;*/
        padding: 16px 0;
        border-bottom: 1px solid #ededed;
        /*换行*/
        flex-wrap: wrap;
    }

    .ul-list .li-item .thumb {
        min-width: 100px;
        height: 80px;
        overflow: hidden;
        border: solid 1px #efefef;
    }

    .ul-list .li-item .thumb img {
        width: 100%;
    }

    .ul-list .li-item .md-cell {
        padding: 0 10px;
        flex-grow: 1;
        text-align: left;
    }

    .ul-list .li-item .title {
        font-size: 0.9em;
        color: #1D2030;
    }

    .ul-list .li-item .title span {
        float: right;
        /*border-radius: 9px;*/
        width: 70%;
        border: 0;
        color: #1D2030;
        text-align: right;
    }

    .ul-list .li-item .desc {
        color: #7E8A96;
        font-size: 0.9em;
    }

    .ul-list .li-item .thumb .cell-3 {
        display: flex;
        align-items: center;
        color: #666;
        white-space: nowrap;
    }

    .ul-list .li-item .cell-3 {
        display: flex;
        align-items: center;
        color: #666;
        white-space: nowrap;
    }

    .ul-list .li-item p {
        margin: 8px 0;
        padding: 0;
    }

    .ul-list .li-item .price {
        color: #D73A2C;
        font-size: 20px;
    }

    .recordDetail .form-item {
        display: flex;
        align-items: center;

    }

    .recordDetail .form-item .form-icon {
        height: 20px;
        width: 26px;
    }

    .recordDetail .form-item .txt-gray {
        color: #999;
    }

    .recordDetail .form-item .form-title {
        width: 100px;
        font-size: 0.9em !important;
    }

    .recordDetail .form-item .form-title .top {
        align-self: flex-start;
    }

    .recordDetail .form-item .form-value {
        flex-grow: 1;
        padding-right: 10px;
    }

    .recordDetail .form-item .form-value .none {
        border: none;
    }

    .recordDetail .form-item .form-value input {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        border: none;
        outline: none;
        font-size: 0.9em !important;
    }

    .recordDetail .form-item .form-value textarea {
        border: none;
        outline: none;
        width: 100%;
        resize: none;
        font-size: 0.9em !important;
    }

    .recordDetail .form-group {
        background-color: #fff;
        padding: 0px 10px;
    }

    .recordDetail .form-item .form-title {
        width: 100px;
        text-align: left;
        font-size: 1em !important;
        color: #B6B7B9;
        padding-left: 10px;
    }

    .recordDetail .form-item .form-value input {
        text-align: right;
        font-size: 1em !important;
    }

    .recordDetail .form-group .form-item {
        font-size: 1em !important;
        padding: 12px 0;
        border-bottom: 1px solid #e8e8e8;
    }

    .recordDetail .form-group .item-textarea {
        height: 50px;
    }

    .recordDetail .form-group .item-textarea {
        height: 50px;
        border: 0px;
        width: 100%;
        color: #BABABA;
        font-size: 1em !important;
    }

</style>